アクション列の追加


Spread.Viewsでは、actionプロパティを文字列または配列として列内で使用できます。編集、取り消しといった組み込みアクションを使用することも、カスタムアクションを指定することもできます。個々のアクションは、名前プレゼンター、およびハンドラをパラメータとして持つオブジェクトです。デフォルトでは、アクションはボタンとして設定されます。

ハンドラ関数には、以下の引数を指定できます。

  • hitInfo
  • dataItem
  • gridModel

列にアクションを実装するには、次の手順を実行します。

サンプルコード

  1. グリッドの列を定義します。デフォルトでは、アクションはボタンとして設定されます。したがって、列定義に指定する必要があるのはボタン名だけです。

     var columns = [
            { id: 'firstName', caption: 'First Name', dataField: 'firstName', width: '80' },
               { id: 'lastName', caption: 'Last Name', dataField: 'lastName', width: '80' },
               { id: 'score', caption: 'Score', dataField: 'score', width: '80', dataType: 'number' },
               { id: 'position', caption: 'Position', dataField: 'position', width: '*' },
               {
                   id: 'controlPanel',
                   action: [{
                       name: 'edit'
                   }, {
                       name: 'details',
                       handler: showDetails
                   }],
                   width: 270
               }
       ];
  2. 各アクションボタンの関数を定義します。

     function showDetails(args) {
       var hitInfo = args.hitInfo;
       var dataItem = args.dataItem;
       initDialog(dataItem);
     }
    
     function initDialog(dataItem) {
       var overlay = $(<div class="dialog-overlay"></div>');
       var dialogContainer = $('<div class="dialog-container"></div>');
       var dialog = $('<div class="dialog-header"><span style="font-weight:bold">Applicant Details</span><div class="dialog-close-button"><span>✕</span></div></div>' +
           '<div class="dialog-body">' +
           '<div style="font-size:20px;font-weight:bold;">' + dataItem.firstName + ' ' + dataItem.lastName + '</div>' +
           '<div style="font-style:italic">' + dataItem.position + '</div>' +
           '<div style="margin-top:15px;">' + dataItem.advantage + '</div></div>');
       dialogContainer.append(dialog);
       $(document.body).append(overlay).append(dialogContainer);
       overlay.on('mousewheel', function () {
           return false;
       });
       $('.dialog-close-button').on('click', function () {
           overlay.remove();
           dialogContainer.remove();
       });
    
       var screenWindow = $(window);
       var left = parseInt((screenWindow.width() - dialogContainer.width()) / 2 + window.pageXOffset);
       var top = parseInt((screenWindow.height() - dialogContainer.height()) / 2 + window.pageYOffset);
       dialogContainer.css({
           left: left,
           top: top
       });
     }

参照

rowHeight

colMinWidth

allowEditing